/**
* Created by alan on 17-5-1.
*/
<template>
  <section>
    <div class="bg">
      <el-form :model="loginForm" :rules="loginRule" ref="loginForm" label-position="left" class="login_form">
        <div class="panel">
          <div class="login_title">
            志 愿 合 大
          </div>
          <el-form-item prop="username">
            <i class="icon fa fa-user"></i><input border='false' type="text" class="inputW" width="200px" v-model="loginForm.username"  placeholder="输入用户名"></input>
          </el-form-item>
          <el-form-item prop="email" v-show="userStatus">
            <i class="icon fa fa-envelope-o fa-fw"></i><input border='false' type="text" class="inputW" width="200px" v-model="loginForm.email"  placeholder="输入邮箱"></input>
          </el-form-item>
          <el-form-item prop="password">
            <i class="icon fa fa-key"></i><input border='false' type="password" class="inputW" width="60px" v-model="loginForm.password" auto-complete="off" placeholder="输入个人密码"></input>
          </el-form-item>
          <el-form-item prop="confirmpass" v-if="userStatus">
            <i class="icon fa fa-check"></i><input border='false' type="password" class="inputW" width="60px" v-model="loginForm.confirmpass" auto-complete="off" placeholder="确认个人密码"></input>
          </el-form-item>

          <el-form-item prop="checkpass" v-if="!userStatus">
            <i class="icon"></i><input border='false' type="text" class="inputW icon_checkpass"  v-model="loginForm.checkpass" style="width: 226px;" auto-complete="off" placeholder="输入右侧验证码"></input>
            <el-button @click="chageCode" style="float:right; width: 100px; height: 40px;"><img :src = "checkCode" /></el-button>
          </el-form-item>
          <el-form-item v-show="!userStatus">
          <el-button style="color: white;width:95%;margin-left:1%;border-radius: 5px;height: 50px;background-color: #f14c50; font-size: 18px;" :loading="logining" @click="submit">登录</el-button>
          </el-form-item>
          <el-form-item v-show="userStatus">
            <el-button style="color: white;width:45%;margin-left:1%;border-radius: 5px;height: 50px;background-color: #104c50; font-size: 18px;" @click="userRegister(1)">志愿个人注册</el-button>
            <el-button style="color: white;width:45%;border-radius: 5px;height: 50px;background-color: #a14c50; font-size: 18px;"  @click="userRegister(2)">志愿组织注册</el-button>
          </el-form-item>
          <el-form-item v-show="userStatus">
            <el-button style="color: white;width:95%;margin-left:1%;border-radius: 5px;height: 50px;background-color: #f14c50; font-size: 18px;" @click="userRegister(3)">学校注册</el-button>
          </el-form-item>
          <div class="register" style="float: right;" v-show="!userStatus"><a @click="register(1)">还没有账号，立即注册？</a></div>
          <div class="register" style="float: right;" v-show="userStatus"><a @click="register(2)">已有账号，立即登录！</a></div>

        </div>


      </el-form>
    <!--<ml-change-password ref="changePassword" changeType="1" :username="loginForm.username"></ml-change-password>-->
    </div>

  </section>
</template>
<script>
  import DataUtil from '../common/dataUtil'
  import mlChangePassword from '../components/_changePassword.vue'
  import ElForm from "../../node_modules/element-ui/packages/form/src/form";
  import ElFormItem from "../../node_modules/element-ui/packages/form/src/form-item";
  import Config from '../common/config';
  export default {
    data() {

      var validatePass5 = (rule, value, callback) => {
        var regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
        if (value === '') {
          callback(new Error('邮箱不能为空！'));
        } else if (!regex.test(value)) {
          callback(new Error('邮箱格式不合法！'));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码！'));
        } else if (value.length < 6) {
          callback(new Error('密码长度不能低于6位！'));
        } else {
          if (this.loginForm.confirmpass != '') {
            this.$refs.loginForm.validateField("confirmpass");
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.loginForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatePass3 = (rule, value, callback) => {

          var flag = false;
          this.$http.post('user/judgeCheckCode',{'userName': this.loginForm.checkpass}).then(response =>{
              if (response.data.data === false) {
                  flag = true;
              }
            if (value === '') {
              callback(new Error('请输入右侧验证码'));
            } else if (flag) {
              callback(new Error('验证码输入错误!'));
              this.chageCode();
            } else {
              callback();
            }
          });
      };
      var validatePass4 = (rule, value, callback) => {

        if (value === '') {
          callback(new Error('请输入账号'));
        }
        //注册判断用户名称是否重复
        if (this.userStatus == true) {
            this.$http.post('user/judgeUserName',{'userName': this.loginForm.username}).then(response => {
                if (response.body.data === false) {
                  callback(new Error('该用户名称已存在!'));
                } else {
                    callback();
                }
            })
        } else {
            callback();
        }

      };
      return {
        loginForm: {
            username: "",
          email: '1@qq.com',
          password: '',
          checkpass: '',
          confirmpass: '',
        },
        checkCode: Config.host + '/user/getCheckImage?sessionId=' + DataUtil.sid(),
        loginRule: {
          username: [{
            validator: validatePass4,
            trigger: 'blur'
          }],
          password: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          confirmpass: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
          checkpass: [{
            validator: validatePass3,
            trigger: 'blur'
          }],
          email: [{
            validator: validatePass5,
            trigger: 'blur'
          }]
        },
        userStatus: false,
        checked: true,
        logining: false
      };
    },
    methods: {
      submit() {
        this.$refs.loginForm.validate((valid) => {
          if (valid && !this.logining) {
            let _data = {
              userName: this.loginForm.username,
              passWord: this.loginForm.password
            }
            this.logining = true
            this.$http.post('user/userLogin', _data).then(response => {
              let {
                status,
                body
              } = response
              this.logining = false
              if (1 == body.code && body.data) {
                DataUtil.sid(body.data.sessionId);
                DataUtil.id(body.data.id);
                //保存用户角色
                DataUtil.userRole(body.data.userRole);
                DataUtil.userName(body.data.realName);
                if (this.checked) {
                  DataUtil.account(body.data.userName);
                } else {
                  DataUtil.account('');
                }
                this.$router.push('/home')
              } else if (10211 == body.code) {
                this.loginForm.password = ''
                this.$refs[''].show()
              } else {
                this.$message.error(response.body.message)
              }
            }, response => {
              this.logining = false
            })
          } else {
            return false;
          }
        });
      },
      //用户注册
      userRegister(userRole) {
        this.$refs.loginForm.validate((valid) => {
          if (valid && !this.logining) {
            let _data = {
              userName: this.loginForm.username,
              passWord: this.loginForm.password,
              email: this.loginForm.email,
              userRole: userRole
            }
            this.logining = true
            this.$http.post('user/insertOrUpdateUser', _data).then(response => {

              this.logining = false
              if (1 == response.body.code && response.body.data) {
                this.$message('注册成功');
//                this.userStatus = false;
                if (userRole == 2 || userRole == 3) {
                  DataUtil.userName('');
                  DataUtil.sid('');
                  DataUtil.id(response.body.data.id);
                  DataUtil.userRole('4');
                  this.$router.push('/UploadData')
                } else {
                  window.close();
                  window.open('#/login');
                }
              } else {
                this.$message.error(response.body.message)
              }
            })
          } else {
            return false;
          }
        });
      },
      register(type) {
        this.$refs['loginForm'].resetFields();
          if (type == 1) {
            this.userStatus = true;
            this.loginForm.email = '';
          } else if (type == 2) {
              this.userStatus = false;
          }


      },
      pageInit() {
        if (DataUtil.account()) {
          this.loginForm.username = DataUtil.account()
        }

      },
      chageCode() {
        this.checkCode = Config.host + '/user/getCheckImage?sessionId=' + DataUtil.sid() + '&change=' + new Date();
//        this.$http.post('user/getCheckImage','').then(response =>{
//          this.checkCode = response.data;
//        });
      },
      checkedKeep(){
        if(this.checked){
          this.checked=false;
        }else{
          this.checked=true;
        }
        // this.keepImg="../assets/password.png"
        // this.$refs.checkKeep.style="background: url(../assets/password.png)";
      }
    },
    mounted: function () {
      this.pageInit();
//      this.getCheckImage();
    },
    components: {
      ElFormItem,
      ElForm,
      mlChangePassword
    }
  }

</script>
<style scoped>
  .login_form {
    width: 380px;
    margin: 10% auto;
    padding: 20px;
    border-top: 0;
    background: #fff;
    color: #666;
    border-radius: 2px;
    /*box-shadow: rgba(0, 0, 0, 0.117647) 0px 2px 4px 0px, rgba(0, 0, 0, 0.0392157) 0px 0px 6px 0px;*/
    background-repeat: repeat-x;
    /*background: url("../assets/bgLogin.png");*/
    background: url("../assets/tmbg-white.png");
    background-size: 100% 100%;
  }
  .panel {
    /*background: url("../assets/tmbg-white.png");*/
    border: 0px;
    border-radius: 4px;
  }
  .fa {
    float:right;
    font-size: 20px;
    /*margin-left: -20px;*/
    /*margin-top: 10px;*/
    position: absolute;
    top: 10px;
    right: 30px;

  }
  .login_title {

    font-size: 24px;
    margin: 0px 20px 20px;
    text-align: center;
    padding-top: 20px;

  }

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    /*top: 0;*/
    /*left: 0;*/
    background: url("../assets/bg.jpg");
    /*background-repeat: no-repeat;*/
    /*background-size: 100%, 100%;*/
    /*overflow: hidden;*/
  }

  /*、*/
  .inputW {
    padding: 2px 15px;
    margin: 0px 10px;
    width: 320px;
    border: 0px solid white;
    border-bottom: 1px solid #eee;
    height: 35px;
    line-height: 35px;
  }
  .icon_checkpass {
    width: 260px;
  }
</style>
